<template>
	<view class="page-container">
		<!-- 吸顶部分 -->
		<!-- <u-sticky> -->
		<view class="unified-sticky-container" :class="{ 'is-active': isHeaderSticky }">
			<!-- 吸顶后显示的tabbar -->
			<view class="header-sticky" :style="topBarStyle">
				<view class="header-sticky-icon" @click="onBack()">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
				<view class="header-sticky-name">
					任务中心
				</view>
				<view class="container-information-right">

				</view>
			</view>
		</view>
		<!-- </u-sticky> -->

		<!-- 可滚动内容 -->
		<scroll-view class="scroll-content" scroll-y="true" @scroll="scroll">
			<view class="header-top-tabbar">
				<view class="header-top-left">
					<u-icon name="arrow-left" color="rgba(0, 0, 0, 1)" size="20" @click="onBack()"></u-icon>
				</view>
				<view class="header-top-center">
					任务中心
				</view>
				<view class="header-top-right" @click="handleNavBar">
					<!-- <image src="/static/index/checkin/checkinNavBarIcon.png" mode=""></image> -->
				</view>
			</view>
			<view class="header-content-bear">
				<image src="/static/index/checkin/bear.png" mode=""></image>
			</view>
			<view class="header-content-backGround">
				<image src="/static/index/checkin/checkinHeader.png" mode=""></image>
			</view>

			<view class="header-content-header-title">
				<view class="left" @click="handleToHoneyRecord()">
					<view class="top">
						<view class="top-left">
							<image src="/static/index/checkin/checkin-badge.png" mode=""></image>
						</view>
						<view class="top-right">
							我的蜂蜜
						</view>
					</view>
					<view class="bottom">
						<view class="bottom-left">
							{{pageData.honeySum}}
						</view>
						<view class="bottom-right">
							<u-icon name="arrow-right" color="rgba(120, 120, 130, 1)" size="10"></u-icon>
						</view>
					</view>
				</view>
				<view class="right" @click="handleToBadgeWall()">
					<view class="top">
						<view class="top-left">
							<image src="/static/index/checkin/checkin-honey.png" mode=""></image>
						</view>
						<view class="top-right">
							我的徽章
						</view>
					</view>
					<view class="bottom">
						<view class="bottom-left">
							{{pageData.medalSum}}
						</view>
						<view class="bottom-right">
							<u-icon name="arrow-right" color="rgba(120, 120, 130, 1)" size="10"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="header-content-footer-header">
				<view class="header-content-footer-header-title">
					已连续签到{{ consecutiveCheckInDays }}天
				</view>
				<view class="header-content-footer-header-image">
					<image src="/static/index/checkin/question-mark.png" mode=""></image>
				</view>
			</view>

			<view class="header-content-footer-unheader" v-if="needSign && reward">
				再连续签到{{ remainingDays }}天，可获得{{reward}}蜂蜜
			</view>
			<view class="header-content-footer-unheader" v-else>
				连续签到可获得奖励
			</view>

			<view class="header-content-footer-checkIn">
				<view class="header-content-footer-checkIn-box" v-for="(checkItem,index) in checkInDateList"
					:key="index">
					<view class="header-content-footer-checkIn-top">
						<view class="header-content-footer-checkIn-top-img">
							<image v-if="!checkItem.isChecked" src="/static/index/checkin/HoneyJar-selected.png"
								mode="">
							</image>
							<image v-else src="/static/index/checkin/HoneyJar-unSelected.png" mode=""></image>
						</view>
						<view v-if="checkItem.isChecked && !checkItem.isReplenish"
							class="header-content-footer-checkIn-top-tag-unChecked">
							已签
						</view>
						<view v-else-if="checkItem.isChecked && checkItem.isReplenish"
							class="header-content-footer-checkIn-top-tag-unChecked">
							已补签
						</view>
						<view v-else-if="checkItem.isToday" class="header-content-footer-checkIn-top-tag-Checked"
							@click="handleSign(checkItem)">
							签到
						</view>
						<view v-else-if="!checkItem.isToday && !checkItem.isChecked && isPastDate(checkItem.date)"
							class="header-content-footer-checkIn-top-tag-Checked" @click="handleSign(checkItem)">
							补签
						</view>
						<view v-else class="header-content-footer-checkIn-top-tag-Checked">
							签到
						</view>
					</view>
					<view class="header-content-footer-checkIn-bottom">
						{{checkItem.date}}
					</view>
				</view>
			</view>

			<view class="footer">
				<view class="footer-header">
					<view class="footer-header-left">
						<view class="footer-header-left-image">
							<image src="/static/index/checkin/gold-coin.png" mode=""></image>
						</view>
						<view class="footer-header-left-title">
							<image src="/static/index/checkin/BeginnerMission.png" mode=""></image>
						</view>
					</view>
					<view class="footer-header-right">
						已完成{{ beginnerMissionProgress.completed }}/{{ beginnerMissionProgress.total }}
					</view>
				</view>
				<!-- 新手任务 -->
				<view class="footer-content">
					<view class="footer-content-item" v-for="(displayedMissionItem,index) in displayedMissionList"
						:key="index">
						<view class="footer-content-item-top">
							<view class="footer-content-item-top-left">
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/star-smile-fill.png" mode=""></image>
								</view>
								<view class="footer-content-item-top-title">
									{{ getTaskTagLabel(displayedMissionItem.taskTag) }}
								</view>
							</view>
							<view class="footer-content-item-top-right">
								<view class="footer-content-item-top-title">
									{{ displayedMissionItem.taskTitle }}
								</view>
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/question-mark.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="footer-content-item-bottom">
							<view class="footer-content-item-bottom-left">
								{{ displayedMissionItem.taskRemark }}
							</view>
							<view class="footer-content-item-bottom-right"
								:class="{ 'completed': displayedMissionItem.clientUserTask !== null }">
								{{ displayedMissionItem.clientUserTask && displayedMissionItem.clientUserTask.taskStart == 1 ? '已完成' : '去完成'}}
							</view>
						</view>
						<view class="bottom-line"></view>
					</view>

					<!-- 展开/收起按钮 -->
					<view class="footer-content-toggle" v-if="BeginnerMission.length > 2" @click="toggleMissionList">
						<view class="footer-content-toggle-text">
							{{ isMissionListExpanded ? '收起' : '展开更多' }}
						</view>
						<view class="footer-content-toggle-icon" :class="{ 'expanded': isMissionListExpanded }">
							<u-icon name="arrow-down" size="20" color="#FF7E16"></u-icon>
						</view>
					</view>
				</view>

				<!-- 日常任务 -->
				<view class="footer-header">
					<view class="footer-header-left">
						<view class="footer-header-left-image">
							<image src="/static/index/checkin/clock.png" mode=""></image>
						</view>
						<view class="footer-header-left-title">
							<image src="/static/index/checkin/DailyTasksListProgress.png" mode=""></image>
						</view>
					</view>
					<view class="footer-header-right">
						已完成{{ DailyTasksListProgress.completed }}/{{ DailyTasksListProgress.total }}
					</view>
				</view>
				<!-- 日常任务 -->
				<view class="footer-content">
					<view class="footer-content-item" v-for="(DailyTasksListItem,index) in displayedDailyTasksList"
						:key="index">
						<view class="footer-content-item-top">
							<view class="footer-content-item-top-left">
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/calendar.png" mode=""></image>
								</view>
								<view class="footer-content-item-top-title">
									{{ getTaskTagLabel(DailyTasksListItem.taskTag) }}
								</view>
							</view>
							<view class="footer-content-item-top-right">
								<view class="footer-content-item-top-title">
									{{ DailyTasksListItem.taskTitle }}
								</view>
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/question-mark.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="footer-content-item-bottom">
							<view class="footer-content-item-bottom-left">
								{{ DailyTasksListItem.taskRemark }}
							</view>
							<view class="footer-content-item-bottom-right"
								:class="{ 'completed': DailyTasksListItem.clientUserTask !== null }">
								{{ DailyTasksListItem.clientUserTask && DailyTasksListItem.clientUserTask.taskStart == 1 ? '已完成' : '去完成'}}
							</view>
						</view>
						<view class="bottom-line"></view>
					</view>

					<!-- 展开/收起按钮 -->
					<view class="footer-content-toggle" v-if="DailyTasksList.length > 2" @click="isMissionList">
						<view class="footer-content-toggle-text">
							{{ DailyTasksListExpanded ? '收起' : '展开更多' }}
						</view>
						<view class="footer-content-toggle-icon" :class="{ 'expanded': DailyTasksListExpanded }">
							<u-icon name="arrow-down" size="20" color="#FF7E16"></u-icon>
						</view>
					</view>
				</view>

				<!-- 限时任务 -->
				<view class="footer-header">
					<view class="footer-header-left">
						<view class="footer-header-left-image">
							<image src="/static/index/checkin/gold-coin2.png" mode=""></image>
						</view>
						<view class="footer-header-left-title2">
							<image src="/static/index/checkin/Time-limited-task.png" mode=""></image>
						</view>
					</view>
					<view class="footer-header-right">
						已完成{{ timeLimitedTaskProgress.completed }}/{{ timeLimitedTaskProgress.total }}
					</view>
				</view>

				<!-- 限时任务 -->
				<view class="footer-content">
					<view class="footer-content-item" v-for="(TimeLimitedTaskItem,index) in TimeLimitedTaskList"
						:key="index">
						<view class="footer-content-item-top">
							<view class="footer-content-item-top-left2">
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/star-smile-fill2.png" mode=""></image>
								</view>
								<view class="footer-content-item-top-title">
									{{ getTaskTagLabel(TimeLimitedTaskItem.taskTag) }}
								</view>
							</view>
							<view class="footer-content-item-top-right">
								<view class="footer-content-item-top-title">
									{{ TimeLimitedTaskItem.taskTitle }}
								</view>
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/question-mark.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="footer-content-item-bottom">
							<view class="footer-content-item-bottom-left">
								{{ TimeLimitedTaskItem.taskRemark }}
							</view>
							<view class="footer-content-item-bottom-right"
								:class="{ 'completed': TimeLimitedTaskItem.clientUserTask !== null }">
								{{ TimeLimitedTaskItem.clientUserTask && TimeLimitedTaskItem.clientUserTask.taskStart == 1 ? '已完成' : '去完成'}}
							</view>
						</view>
						<view class="bottom-line"></view>
					</view>
				</view>

				<view class="footer-banner">
					<image src="/static/index/checkin/poster.png" mode=""></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getPosts,
		topicsList,
		getTaskList,
		sign
	} from '@/request/api.js';
	export default {
		data() {
			return {
				pageData: {},
				isHeaderSticky: false,
				checkInDateList: [],
				BeginnerMission: [],
				DailyTasksList: [],
				TimeLimitedTaskList: [],
				isMissionListExpanded: true, // 控制是否展开
				DailyTasksListExpanded: true, // 控制是否展开
				defaultMissionCount: 2, // 默认显示的任务数量
				needSign: '', //连续签到的任务天数
				reward: '', //连续签到的奖励数量

			};
		},
		// 添加计算属性
		computed: {
			// 在 computed 中添加
			remainingDays() {
				if (!this.needSign || this.needSign === '') {
					return 0;
				}
				const remaining = this.needSign - this.consecutiveCheckInDays;
				return Math.max(0, remaining);
			},
			displayedMissionList() {
				if (this.isMissionListExpanded || this.BeginnerMission.length <= this.defaultMissionCount) {
					return this.BeginnerMission;
				}
				return this.BeginnerMission.slice(0, this.defaultMissionCount);
			},
			displayedDailyTasksList() {
				if (this.DailyTasksListExpanded || this.DailyTasksList.length <= this.defaultMissionCount) {
					return this.DailyTasksList;
				}
				return this.DailyTasksList.slice(0, this.defaultMissionCount);
			},
			topBarStyle() {
				// #ifdef MP-WEIXIN
				if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
					const paddingRight = this.$store.state.systemInfo.capsuleInfo.width + this.$store.state.systemInfo
						.capsuleRightPadding * 2;
					const paddingTop = this.$store.state.systemInfo.statusBarHeight + this.$store.state.systemInfo
						.capsuleRightPadding;


					return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
				}
				// #endif
				// #ifdef APP-PLUS || H5
				return `padding-top: ${uni.getSystemInfoSync().statusBarHeight}px;`;
				// #endif
				return '';
			},
			// 新手任务完成数量计算
			beginnerMissionProgress() {
				if (!this.BeginnerMission || this.BeginnerMission.length === 0) {
					return {
						completed: 0,
						total: 0
					};
				}
				const completed = this.BeginnerMission.filter(item => item.clientUserTask !== null).length;
				return {
					completed: completed,
					total: this.BeginnerMission.length
				};
			},

			// 日常任务完成数量计算
			DailyTasksListProgress() {
				if (!this.DailyTasksList || this.DailyTasksList.length === 0) {
					return {
						completed: 0,
						total: 0
					};
				}
				const completed = this.DailyTasksList.filter(item => item.clientUserTask !== null).length;
				return {
					completed: completed,
					total: this.DailyTasksList.length
				};
			},

			// 限时任务完成数量计算
			timeLimitedTaskProgress() {
				if (!this.TimeLimitedTaskList || this.TimeLimitedTaskList.length === 0) {
					return {
						completed: 0,
						total: 0
					};
				}
				const completed = this.TimeLimitedTaskList.filter(item => item.clientUserTask !== null).length;
				return {
					completed: completed,
					total: this.TimeLimitedTaskList.length
				};
			},
			consecutiveCheckInDays() {
				if (!this.checkInDateList || this.checkInDateList.length === 0) {
					return 0;
				}

				let consecutiveDays = 0;

				// 从后往前遍历（从周日到周一）
				for (let i = this.checkInDateList.length - 1; i >= 0; i--) {
					if (this.checkInDateList[i].isChecked) {
						consecutiveDays++;
					} else {
						// 如果当天是过去的日期且未签到，则中断连续计算
						if (this.checkInDateList[i].isToday === false && this.isPastDate(this.checkInDateList[i].date)) {
							break;
						}
						// 如果是今天或未来日期未签到，不影响之前的连续签到计算
					}
				}

				return consecutiveDays;
			}
		},
		onLoad() {
			// 签到的日期显示逻辑处理
			this.generateCheckInDateList()
			// 任务中心接口初始化
			this.getTaskListCenter()
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			const shouldBeSticky = scrollTop > 10;
			if (scrollTop > 10) {
				this.setStatusBarBlack()
			} else {
				this.setStatusBarWhite();
			}
			if (this.isHeaderSticky !== shouldBeSticky) {
				this.isHeaderSticky = shouldBeSticky;
			}
		},
		onReachBottom() {},
		methods: {
			getTaskListCenter() {
				let params = {
					userId: this.$store.state.userInfo.userId,
				}
				getTaskList(params).then(res => {
					this.pageData = res.data.data
					// 任务列表
					let takeList = res.data.data.taskList

					// 先配置已签到日期的数据显示
					this.formatDataList(res.data.data.clientUserSignList)

					// 存储连续签到奖励的数据用于签到模块的数据展示
					// takeList任务标签(1:初来乍到 2：连续奖励 3：新人露面 4：互动达人 5：城市探索者)
					const consecutiveRewards = takeList.filter(item => item.taskTag == '2');
					if (consecutiveRewards.length > 0) {
						// 按需要签到天数从小到大排序
						const sortedRewards = consecutiveRewards.sort((a, b) => parseInt(a.ext2) - parseInt(b
							.ext2));

						// 查找第一个需要签到天数大于当前连续天数的任务
						const nextReward = sortedRewards.find(item => parseInt(item.ext2) > this
							.consecutiveCheckInDays);

						if (nextReward) {
							// 如果找到了下一个未完成的任务
							this.needSign = nextReward.ext2;
							this.reward = nextReward.ext1;
						} else {
							// 如果所有任务都已完成，显示下一个更高目标（在最大值基础上+1）
							const maxReward = sortedRewards[sortedRewards.length - 1];
							this.needSign = parseInt(maxReward.ext2) + 1;
							this.reward = maxReward.ext1;
						}
					}

					// 修改这里的逻辑，使用 filter 来筛选任务类型
					this.BeginnerMission = takeList.filter(item => item.taskType == 1);
					this.TimeLimitedTaskList = takeList.filter(item => item.taskType == 2); // 假设限时任务的taskType为2
					this.DailyTasksList = takeList.filter(item => item.taskType == 3); // 假设每日任务的taskType为3
				});
			},
			formatDataList(clientUserSignList) {
				// 如果没有签到数据，直接返回
				if (!clientUserSignList || clientUserSignList.length === 0) {
					return;
				}

				// 确保 checkInDateList 已经生成
				if (!this.checkInDateList || this.checkInDateList.length === 0) {
					console.log('checkInDateList 尚未生成');
					return;
				}

				// 遍历已签到日期列表
				clientUserSignList.forEach(signItem => {
					// signDate格式为 "yyyy-MM-dd"，需要转换为 "M.d" 格式进行匹配
					const signDate = new Date(signItem.signDate);
					const month = signDate.getMonth() + 1;
					const day = signDate.getDate();
					const formattedDate = `${month}.${day}`;
					console.log(formattedDate);
					// 在 checkInDateList 中查找对应日期并更新签到状态
					const targetDateIndex = this.checkInDateList.findIndex(item => item.date === formattedDate);
					if (targetDateIndex !== -1) {
						this.checkInDateList[targetDateIndex].isChecked = true;
						// 根据接口返回的 isReplenish 字段设置是否为补签
						if (signItem.isReplenish !== undefined) {
							this.checkInDateList[targetDateIndex].isReplenish = signItem.isReplenish == 1;
						}
						console.log(`已更新日期 ${formattedDate} 的签到状态`);
					} else {
						console.log(`未找到日期 ${formattedDate} 在 checkInDateList 中`);
					}
				});
			},
			generateCheckInDateList() {
				const today = new Date();
				// 获取今天是星期几 (0-6, 0表示周日)
				const todayWeekday = today.getDay();
				// 计算距离周一需要减去的天数
				// 如果今天是周日(todayWeekday=0)，需要减去6天到周一
				// 其他情况，需要减去(todayWeekday-1)天到周一
				const daysToMonday = todayWeekday === 0 ? 6 : todayWeekday - 1;

				// 设置本周一的日期
				const monday = new Date(today);
				monday.setDate(today.getDate() - daysToMonday);

				this.checkInDateList = [];

				// 生成从周一到周日的7天数据
				for (let i = 0; i < 7; i++) {
					const date = new Date(monday);
					date.setDate(monday.getDate() + i);

					const month = date.getMonth() + 1;
					const day = date.getDate();
					const weekday = date.getDay();

					// 星期几的中文映射
					const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

					// 修改日期格式：9.24
					const formattedDate = `${month}.${day}`;

					this.checkInDateList.push({
						date: formattedDate,
						weekday: weekdays[weekday],
						isToday: date.toDateString() === today.toDateString(), // 标记今天
						isChecked: false, // 默认未签到
						isReplenish: false // 默认非补签
					});
				}
			},
			isPastDate(dateString) {
				// 从 dateString (例如 "10.19") 构造日期
				const today = new Date();
				const currentYear = today.getFullYear();
				const [month, day] = dateString.split('.');
				const date = new Date(currentYear, month - 1, day); // month需要减1，因为Date的月份从0开始

				// 设置时间为当天0点，便于比较日期
				today.setHours(0, 0, 0, 0);
				date.setHours(0, 0, 0, 0);

				// 如果日期小于今天，则为过去日期
				return date < today;
			},
			handleSign(item) {
				// 获取今天的日期
				const today = new Date();
				today.setHours(0, 0, 0, 0); // 设置时间为当天0点，便于比较日期

				// 从 item.date (例如 "10.19") 构造完整日期
				const currentYear = today.getFullYear();
				const [month, day] = item.date.split('.');
				const clickDate = new Date(currentYear, month - 1, day); // month需要减1，因为Date的月份从0开始

				// 如果点击的日期在今天之后，则不处理
				if (clickDate > today) {
					console.log("不能签到未来的日期");
					return;
				}

				const formattedDate = `${currentYear}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;

				let params = {
					userId: this.$store.state.userInfo.userId,
					signDate: formattedDate,
					isReplenish: item.isToday ? 0 : 1 //0为当日签到，1为补签
				};

				// 调用签到接口
				sign(params).then(res => {
					// 处理签到结果
					if (res.data.code == 200) {
						// 签到成功，更新UI状态
						item.isChecked = true;
						// 更新补签状态
						item.isReplenish = !item.isToday;
						uni.showToast({
							title: '签到成功',
							icon: 'success'
						});
					}
				}).catch(error => {
					// 处理错误情况
					uni.showToast({
						title: '签到失败',
						icon: 'none'
					});
				});
			},
			getTaskTagLabel(taskTag) {
				const tagMap = {
					'1': '初来乍到',
					'2': '连续奖励',
					'3': '新人露面',
					'4': '互动达人',
					'5': '城市探索者'
				};
				return tagMap[taskTag] || taskTag; // 如果找不到对应标签，返回原始值
			},
			// 去徽章墙
			handleToBadgeWall() {
				uni.navigateTo({
					url: '/pages_sub/user/BadgeWall/BadgeWall'
				})
			},
			// 去蜂蜜记录
			handleToHoneyRecord() {
				uni.navigateTo({
					url: '/pages_sub/user/MissionCenter/MissionCenter'
				})
			},
			onBack() {
				uni.navigateBack();
			},
			// 蜂蜜中心
			handleNavBar() {

			},
			// 切换新手任务列表展开/收起状态
			toggleMissionList() {
				this.isMissionListExpanded = !this.isMissionListExpanded;
			},
			// 切换日常任务列表展开/收起状态
			isMissionList() {
				this.DailyTasksListExpanded = !this.DailyTasksListExpanded;
			},
			handleScroll(e) {
				const scrollTop = e.detail.scrollTop;
				this.isScroll = e.detail.scrollTop > 0
				// 控制探索本地圈吸顶
				this.isExploreSticky = scrollTop > this.exploreStickyThreshold;
			},

			scroll: function(e) {
				const scrollTop = e.detail.scrollTop;
				const shouldBeSticky = scrollTop > 10;
				if (scrollTop > 10) {
					this.setStatusBarBlack()
				} else {
					this.setStatusBarWhite();
				}
				if (this.isHeaderSticky !== shouldBeSticky) {
					this.isHeaderSticky = shouldBeSticky;
				}
			},
			setStatusBarWhite() {
				// 设置状态栏前景色为白色
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
			},

			setStatusBarBlack() {
				// 如果需要切换回黑色
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		background-color: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: url(/static/index/checkin/MissionCenter.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-overflow-scrolling: touch;

		.unified-sticky-container {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 998;
			// background-color: #ffffff;
			background-image: url(/static/index/checkin/MissionCenter.png);
			visibility: hidden;
			opacity: 0;
			transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

			&.is-active {
				visibility: visible;
				opacity: 1;
				padding-bottom: 20rpx;
				padding-top: 20rpx;
			}

			.header-sticky {
				padding: 0 30rpx;
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.header-sticky-icon {
					// 左侧图标
				}

				.header-sticky-name {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(0, 0, 0, 1);
					white-space: nowrap;
				}

				.container-information-right {
					// 右侧占位元素，保持布局平衡
					width: 44rpx; // 与左侧图标宽度相近
					height: 44rpx;
				}
			}
		}

		.scroll-content {
			flex: 1;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			.header-top-tabbar {
				margin: 74rpx 30rpx 0;
				width: calc(100vw - 60rpx);
				height: 72rpx;
				line-height: 72rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative; // 改为relative而不是absolute

				.header-top-left {
					height: 56rpx;
					display: flex;
					z-index: 10; // 确保左右两侧内容在标题之上

					.header-top-left-image {
						width: 44rpx;
						height: 44rpx;
					}

					.header-top-left-titleImage {
						width: 200rpx;
						height: 56rpx;
					}
				}

				.header-top-center {
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(0, 0, 0, 1);
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					white-space: nowrap;
					z-index: 5;
				}

				.header-top-right {
					min-width: 74rpx;
					z-index: 10; // 确保左右两侧内容在标题之上

					image {
						margin: 5rpx 0;
						width: 74rpx;
						height: 62rpx;
					}
				}
			}

			.header-content-bear {
				width: 400rpx;
				height: 400rpx;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 3; // 设置较低的z-index值，确保在背景图片下方

				image {
					width: 400rpx;
					height: 400rpx;
				}
			}

			.header-content-backGround {
				width: calc(100% - 60rpx);
				height: 256rpx;
				margin: 0 30rpx 0;
				position: absolute; // 添加定位属性
				top: 326rpx;
				z-index: 2; // 设置较高的z-index值

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header-content-header-title {
				display: flex;
				position: absolute;
				width: 50%;
				top: 180rpx;
				left: 44rpx;
				z-index: 10;

				.left {
					width: 136rpx;
					margin-right: 50rpx;

					.top {
						width: 136rpx;
						display: flex;
						align-items: center;

						.top-left {
							width: 30rpx;
							height: 30rpx;
							flex-shrink: 0;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 100%;
								height: 100%;
								object-fit: contain; // 保持图片比例，完整显示
							}
						}

						.top-right {
							margin-left: 10rpx;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							font-weight: bold;
						}
					}

					.bottom {
						width: 136rpx;
						margin-top: 24rpx;
						display: flex;
						justify-content: end;
						align-items: center;

						.bottom-left {
							min-width: 108rpx;
							color: rgba(0, 0, 0, 1);
							font-weight: bold;
							font-size: 40rpx;
							text-align: center;
						}

						.bottom-right {
							width: 28rpx;
						}
					}
				}

				.right {
					width: 136rpx;

					.top {
						display: flex;
						align-items: center;

						.top-left {
							width: 30rpx;
							height: 30rpx;
							flex-shrink: 0;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 100%;
								height: 100%;
								object-fit: contain; // 保持图片比例，完整显示
							}
						}

						.top-right {
							margin-left: 10rpx;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							font-weight: bold;
						}
					}

					.bottom {
						width: 136rpx;
						margin-top: 24rpx;
						display: flex;
						justify-content: end;
						align-items: center;

						.bottom-left {
							min-width: 108rpx;
							color: rgba(0, 0, 0, 1);
							font-weight: bold;
							font-size: 40rpx;
							text-align: center;
						}

						.bottom-right {
							width: 28rpx;
						}
					}
				}
			}

			.header-content-footer-header {
				display: flex;
				position: absolute;
				top: 344rpx;
				left: 50rpx;
				z-index: 10;
				height: 40rpx;
				line-height: 40rpx;

				.header-content-footer-header-title {
					color: rgba(0, 0, 0, 1);
					font-weight: 900;
					font-size: 30rpx;

				}

				.header-content-footer-header-image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 12rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.header-content-footer-unheader {
				display: flex;
				position: absolute;
				width: 50%;
				top: 386rpx;
				left: 50rpx;
				z-index: 10;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				color: rgba(77, 77, 86, 1);
			}

			.header-content-footer-checkIn {
				position: absolute;
				width: calc(100% - 100rpx);
				top: 432rpx;
				left: 50rpx;
				z-index: 10;
				display: flex;
				justify-content: space-between;

				.header-content-footer-checkIn-box {
					width: 90rpx;

					.header-content-footer-checkIn-top {
						width: 90rpx;
						height: 100rpx;
						background-color: rgba(255, 255, 255, 1);
						display: flex; // 添加flex布局
						flex-direction: column; // 垂直排列
						align-items: center; // 水平居中
						justify-content: center; // 垂直居中
						border-radius: 20rpx;

						.header-content-footer-checkIn-top-img {
							margin-top: 10rpx;
							width: 50rpx;
							height: 50rpx;
							display: flex; // 添加flex布局
							align-items: center; // 垂直居中
							justify-content: center; // 水平居中

							image {
								width: 50rpx;
								height: 50rpx;
							}
						}

						.header-content-footer-checkIn-top-tag-unChecked {
							height: 30rpx;
							line-height: 30rpx;
							width: calc(100% - 10rpx);
							background-color: rgba(217, 217, 217, 1);
							color: rgba(120, 120, 130, 1);
							font-weight: 400;
							font-size: 20rpx;
							border-radius: 20rpx;
							text-align: center;
							margin: 5rpx auto 5rpx; // 调整margin，添加顶部间距
						}

						.header-content-footer-checkIn-top-tag-Checked {
							height: 30rpx;
							line-height: 30rpx;
							width: calc(100% - 10rpx);
							background-color: rgba(250, 128, 22, 1);
							color: rgba(255, 255, 255, 1);
							font-weight: 400;
							font-size: 20rpx;
							border-radius: 20rpx;
							text-align: center;
							margin: 5rpx auto 5rpx; // 调整margin，添加顶部间距
						}

					}

					.header-content-footer-checkIn-bottom {
						color: rgba(120, 120, 130, 1);
						font-size: 26rpx;
						font-weight: 500;
						text-align: center;
					}
				}

			}

		}

		.footer {
			background: linear-gradient(to bottom, rgba(255, 252, 237, 1), rgba(237, 253, 250, 1));
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			padding: 30rpx;
			min-height: calc(100vh - 400rpx);
			margin-top: calc(432rpx + 28rpx); // 添加顶部间距，确保与header分离 ,计算规则，签到item的定位高度 + 下边距 + footer的上边距

			.footer-header {
				display: flex;
				justify-content: space-between;
				height: 56rpx;
				line-height: 56rpx;
				margin-bottom: 20rpx;

				.footer-header-left {
					display: flex;

					.footer-header-left-image {
						width: 56rpx;
						height: 56rpx;
						margin-right: 10rpx;

						image {
							width: 56rpx;
							height: 56rpx;
						}
					}

					.footer-header-left-title {

						image {
							margin: 12rpx 0;
							width: 120rpx;
							height: 32rpx;
						}
					}

					.footer-header-left-title2 {

						image {
							margin: 12rpx 0;
							width: 248rpx;
							height: 32rpx;
						}
					}
				}

				.footer-header-right {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(77, 77, 86, 1);
				}
			}

			.footer-content {
				background-color: #fff;
				width: calc(100% - 40rpx);
				height: auto;
				border-radius: 30rpx;
				padding: 30rpx 20rpx;
				margin-bottom: 20rpx;

				.footer-content-item {

					.footer-content-item-top {
						display: flex;

						.footer-content-item-top-left {
							display: flex;
							background-color: rgba(250, 225, 62, 1);
							border-radius: 10rpx;
							height: 30rpx;
							line-height: 30rpx;
							padding: 4rpx 8rpx;
							margin-right: 10rpx;

							.footer-content-item-top-image {
								width: 24rpx;
								height: 24rpx;

								image {
									width: 24rpx;
									height: 24rpx;
								}
							}

							.footer-content-item-top-title {
								color: rgba(0, 0, 0, 1);
								font-weight: 500;
								font-size: 20rpx;
							}
						}

						.footer-content-item-top-left2 {
							display: flex;
							background-color: rgba(111, 232, 6, 1);
							border-radius: 10rpx;
							height: 30rpx;
							line-height: 30rpx;
							padding: 4rpx 8rpx;
							margin-right: 10rpx;

							.footer-content-item-top-image {
								width: 24rpx;
								height: 24rpx;

								image {
									width: 24rpx;
									height: 24rpx;
								}
							}

							.footer-content-item-top-title {
								color: rgba(0, 0, 0, 1);
								font-weight: 500;
								font-size: 20rpx;
							}
						}

						.footer-content-item-top-right {
							display: flex;
							height: 30rpx;
							line-height: 30rpx;
							padding: 4rpx 8rpx;

							.footer-content-item-top-image {
								margin-left: 10rpx;
								width: 24rpx;
								height: 24rpx;

								image {
									width: 24rpx;
									height: 24rpx;
								}
							}

							.footer-content-item-top-title {
								color: rgba(0, 0, 0, 1);
								font-weight: 900;
								font-size: 20rpx;
								font-weight: 500;
								font-size: 28rpx;
								color: rgba(0, 0, 0, 1);
							}
						}
					}

					.footer-content-item-bottom {
						display: flex;
						justify-content: space-between;
						margin-top: 12rpx;

						.footer-content-item-bottom-left {
							background-color: rgba(255, 243, 237, 1);
							border-radius: 10rpx;
							color: rgba(0, 0, 0, 1);
							font-weight: 400;
							font-size: 24rpx;
							padding: 2rpx 10rpx;
							height: 40rpx;
							line-height: 40rpx;
						}

						.footer-content-item-bottom-right {
							width: 100rpx;
							height: 40rpx;
							line-height: 40rpx;
							color: #fff;
							font-size: 24rpx;
							font-weight: 500;
							background-color: rgba(250, 128, 22, 1);
							border-radius: 16rpx;
							text-align: center;
							padding: 2rpx 10rpx;

							// 添加已完成状态的样式
							&.completed {
								background-color: rgba(255, 202, 156, 1);
								color: #fff;
							}
						}
					}

					.bottom-line {
						margin: 24rpx 0;
						border-bottom: 2rpx solid rgba(244, 244, 244, 1);
					}
				}

				// 添加展开/收起按钮样式
				.footer-content-toggle {
					display: flex;
					justify-content: center;
					align-items: center;
					// padding: 20rpx 0;
					cursor: pointer;

					.footer-content-toggle-text {
						font-size: 24rpx;
						color: #FF7E16;
						font-weight: 500;
						margin-right: 10rpx;
					}

					.footer-content-toggle-icon {
						transition: transform 0.3s ease;

						&.expanded {
							transform: rotate(180deg);
						}
					}
				}
			}
		}

		.footer-banner {
			width: 100%;
			height: 382rpx;

			image {
				width: 100%;
				height: 382rpx;
			}
		}
	}
</style>